<template>
    <div class="box">
        <form-line :formData="formData" @handelSearch="handelSearch" @handelSelect="handelSelect"></form-line>
        <elem-table :tableProps="tableProps" :tableData="tableData" :isSelect="isSelect"></elem-table>

        <div class="dialogBox">
            <el-dialog title="条件筛选" :visible.sync="dialogFormVisible">
                <!-- <el-form>
                    <select-each :pre="''" :tableProps="columnOption" :condition.sync="condition.children"></select-each>
                </el-form> -->
                <select-form :tableProps="columnOption" :condition.sync="condition"></select-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="cancel">取 消</el-button>
                    <el-button type="primary" @click="confirmSelect">确 定</el-button>
                </div>
            </el-dialog>
        </div>
        
        <button type="primary" @click="test">111</button>
    </div>
</template>

<script>
import formLine from '@/components/Searchinput/index.vue'
// import selectEach from '@/components/Searchinput/selectEach.vue'
import SelectForm from '@/components/SelectSearch/index.vue'
import elemTable from '@/components/Table/index.vue'
import { selectByExample } from '@/api/demo/index'
export default {
    mounted() {
        this.getPageInfo()
        // this.getMyPageInfo()
    },
    data() {
        return {
            tableProps: [{
                prop: 'username',
                label: '用户名'
            }, {
                prop: 'sex',
                label: '性别'
            }, {
                prop: 'age',
                label: '年龄'
            }, {
                prop: 'address',
                label: '地址'
            },],
            columnOption: [{
                prop: 'user_name',
                label: '用户名'
            }, {
                prop: 'user_number',
                label: '用户号'
            }, {
                prop: 'user_account',
                label: '账户'
            }],
            tableData: [{
                username: '王小虎',
                sex: '男',
                age: '18',
                address: '上海市普陀区金沙江路 1518 弄'
            },
            {
                username: '张三',
                sex: '男',
                age: '22',
                address: '北京市普陀区金沙江路 1518 弄'
            },
            {
                username: '张三1',
                sex: '男',
                age: '22',
                address: '北京市普陀区金沙江路 1518 弄'
            }, {
                username: '李四',
                sex: '男',
                age: '18',
                address: '上海市普陀区金沙江路 1518 弄'
            },
            {
                username: '李四2',
                sex: '男',
                age: '17',
                address: '上海市普陀区金沙江路 1518 弄'
            },
            {
                username: '王五',
                sex: '男',
                age: '30',
                address: '上海市普陀区金沙江路 1518 弄'
            },
            ],
            formData: [
                {
                    label: "查询",
                    key: "search",
                    type: "btn",
                    style: "primary"
                },
                {
                    label: "筛选",
                    key: "select",
                    type: "btn",
                    style: "success"
                },
                // {
                //     label: "姓名",
                //     key: "username",
                //     type: "string"
                // },
                // {
                //     label: "年龄",
                //     key: "age",
                //     type: "number"
                // },
                // {
                //     label: "出生日期",
                //     key: "birthday",
                //     type: "date"
                // },
                // {
                //     label: "会议时间",
                //     key: "conferenceTime",
                //     type: "date_range"
                // },
                // {
                //     label: "手机号码",
                //     key: "phonenumber",
                //     type: "string"
                // },
                // {
                //     label: "职业",
                //     key: "profession",
                //     set: [{
                //         value: '老师',
                //         label: '老师'
                //     }, {
                //         value: '医生',
                //         label: '医生'
                //     }, {
                //         value: '程序员',
                //         label: '程序员'
                //     }],
                //     type: "select"
                // },
                // {
                //     label: "爱好",
                //     key: "hobby",
                //     set: ["篮球", "足球", "游泳"],
                //     type: "checkbox"
                // },
                // {
                //     labal:"身份证号码",
                //     type:"ID"
                // }
            ],
            condition: {
                children: [
                    {
                        key: '',
                        con: '',
                        val: '',
                        linkChar: '',
                        type: 'normal'//||brackets
                    }
                ],
                linkChar: '',
                type: 'brackets'//||brackets
            },
            dialogFormVisible: false,
            isSelect: false,
            viewId: '1'
            // formLabelWidth: '120px'
        }
    },
    methods: {
        //查询
        handelSearch(val) {
            console.log(val);
        },
        //筛选
        handelSelect(val) {
            this.dialogFormVisible = true
        },
        //处理条件
        handelCondition(condition) {
            /*
                筛查出满足条件的数据，覆盖原数组
             */
            // this.tableData = this.tableData.filter(item => {
            //     let flag = true
            //     for (let i = 0; i < condition.length; i++) {
            //         switch (condition[i].con) {
            //             case '=':
            //                 if (condition[i].val == item[condition[i].key]) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case '>':
            //                 if (condition[i].val > item[condition[i].key]) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case '<':
            //                 if (condition[i].val < item[condition[i].key]) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case '>=':
            //                 if (condition[i].val >= item[condition[i].key]) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case '<=':
            //                 if (condition[i].val <= item[condition[i].key]) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case 'between and':
            //                 if (item[condition[i].key] >= condition[i].val[0] && item[condition[i].key] <= condition[i].val[1]) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case 'is null':
            //                 if (item[condition[i].key] == null) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case 'not null':
            //                 if (item[condition[i].key] != null) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             case 'like':
            //                 if (item[condition[i].key].includes(condition[i].val)) {
            //                     break;
            //                 } else {
            //                     flag = false
            //                 }
            //                 break;
            //             default:
            //                 break;
            //         }
            //         if (!flag) break;
            //     }
            //     if (flag) return item
            // })
            /*
                筛查出满足条件的数据，不覆盖覆盖原数组，让他在表格中高亮
            */
            this.tableData = this.tableData.map(item => {
                let flag = true
                for (let i = 0; i < condition.length; i++) {
                    switch (condition[i].con) {
                        case '=':
                            if (condition[i].val == item[condition[i].key]) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case '>':
                            if (condition[i].val > item[condition[i].key]) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case '<':
                            if (condition[i].val < item[condition[i].key]) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case '>=':
                            if (condition[i].val >= item[condition[i].key]) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case '<=':
                            if (condition[i].val <= item[condition[i].key]) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case 'between and':
                            if (item[condition[i].key] >= condition[i].val[0] && item[condition[i].key] <= condition[i].val[1]) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case 'is null':
                            if (item[condition[i].key] == null) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case 'not null':
                            if (item[condition[i].key] != null) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        case 'like':
                            if (item[condition[i].key].includes(condition[i].val)) {
                                break;
                            } else {
                                flag = false
                            }
                            break;
                        default:
                            break;
                    }
                    if (!flag) break;
                }
                if (flag) item.isNeed = true
                return item
            })
            //筛选出来有数据，isSelect=true,表格数据高亮
            if (this.tableData.length > 0) {
                this.isSelect = true
            }
        },
        //确认筛选
        async confirmSelect() {
            let queryCriteriaJson = JSON.stringify(this.condition).replace(/"/g, "'")
            let res = await selectByExample({
                queryCriteriaJson: queryCriteriaJson,
                viewId: this.viewId
            })
            if (res.success) {
                this.tableData = res.root.map(item=>{
                    return {
                        ...item,
                        username: item.userName,
                        sex: item.sex == 1 ? '男' : '女'
                    }
                })
                this.dialogFormVisible = false
                this.initCondition()
            }
        },
        async confirmSelect1() {
            console.log(JSON.stringify(this.condition));
            console.log(this.condition);
            let queryCriteriaJson = JSON.stringify(this.condition).replace(/"/g, "'")
            const formData = new FormData();
            formData.append("queryCriteriaJson", queryCriteriaJson);
            selectByExample({
                queryCriteriaJson: queryCriteriaJson,
                viewId: this.viewId
            }).then(res => {
                if (res.success) {
                    this.getPageInfo()
                    this.tableData = res.data
                    this.dialogFormVisible = false
                    this.initCondition()
                }
            })
            // let { res } = await this.$axios.post("/api/admin/userInfo/selectByExample?viewId="+this.viewId, formData)

            // this.getPageInfo()

            // this.tableData = res.data
            // this.dialogFormVisible = false


            // let { data: res } = await this.$axios.post("/api/user/selectExample",
            //     {
            //         queryJson: JSON.stringify(this.condition)
            //         // username:"111",
            //         // age:18
            //     })
            // this.$http("/api/user/selectExample","post",{qJson : this.condition})

            // let con = this.condition
            // this.handelCondition(con)
            // this.dialogFormVisible = false
            // this.initCondition()


        },
        //取消筛选
        cancel() {
            this.initCondition()
            this.dialogFormVisible = false
        },
        //初始化条件个数
        initCondition() {
            this.condition = {
                children: [
                    {
                        key: '',
                        con: '',
                        val: '',
                        linkChar: '',
                        type: 'normal'//||brackets
                    }
                ],
                linkChar: '',
                type: 'brackets'//||brackets
            }
        },
        async getPageInfo() {
            // this.$axios.post("/api/admin/page/selectByExample?isHaveView='Y'&isHaveViewData='Y'&isHaveItem='Y'&isHaveAttribute='Y'")
            let { data: res } = await this.$axios({
                url: '/api/admin/page/selectByExample',
                method: 'post',
                headers: {
                    'Content-Type': 'application/json'
                },
                params: {
                    isHaveView: 'Y',
                    isHaveViewData: 'Y',
                    isHaveItem: 'Y',
                    isHaveAttribute: 'Y'
                }
            })
            if (res) {
                let jtItemVOS = res.root[0].viewVOS[0].jtItemVOS
                let viewQueryParam = res.root[0].viewVOS[0].viewQueryParam
                this.viewId = res.root[0].viewVOS[0].viewId
                this.columnOption = jtItemVOS.map(item => {
                    let obj = {}
                    obj.prop = item.itemNumber
                    obj.label = item.itemName
                    return obj
                });

                console.log(jtItemVOS, viewQueryParam);
            }

        },

        async getMyPageInfo() {
            let [{ data: res }, { data: res2 }] = await Promise.all([this.getOption(), this.getTableData()])
            console.log(res2);
            this.columnOption = res.data.map(item => {
                let obj = {}
                obj.prop = item.colName
                obj.label = item.label
                return obj
            })
            this.tableProps = this.columnOption
            this.tableData = res2.data
        },
        async getOption() {
            return this.$axios.get("/api/user/columnList")
        },
        async getTableData() {
            return this.$axios.get("/api/user/userInfo")
        },
        async test() {
            console.log(process.env);
            
            const formData = new FormData();
            let record = {
                projName: "xiangmu1",
                projUpJson: JSON.stringify([
                    {
                        prdoDotyName: "合同3",
                        prdoPath: "/hetong/h.doc"
                    },
                    {
                        prdoDotyName: "合同4",
                        prdoPath: "/hetong/h2.doc"
                    }
                ])
            }
            let projUpJson = [
                {
                    nodeSchedule: "53.00",
                    nodeName: "节点2"
                },
                {
                    nodeSchedule: "53.00",
                    nodeName: "节点3"
                },
                {
                    nodeSchedule: "53.00",
                    nodeName: "节点4"
                },
            ]
            let ids = [
                {
                    "createBy": null,
                    "createByName": null,
                    "createTime": 1699336935000,
                    "prdoAuditStatus": "",
                    "prdoAuditTime": null,
                    "prdoContCode": "",
                    "prdoContId": "",
                    "prdoContName": "",
                    "prdoDesc": "",
                    "prdoDotyId": "",
                    "prdoDotyName": "合同1",
                    "prdoFileType": "",
                    "prdoHeadId": "",
                    "prdoHeadName": "",
                    "prdoId": "074983611b6f481bff96a2369c86594f",
                    "prdoInreId": "",
                    "prdoInspectId": "",
                    "prdoName": "",
                    "prdoNumber": "",
                    "prdoPath": "/a/a/a/a.txt",
                    "prdoPlanId": "",
                    "prdoPlanName": "",
                    "prdoProjId": "66b440a2bfb488ae29675ecd03fc3063",
                    "prdoProjName": "",
                    "prdoProjNumber": "",
                    "prdoPrreId": "",
                    "prdoRemark": "",
                    "prdoShortName": "",
                    "prdoStatus": "",
                    "prdoTaskId": "",
                    "prdoTaskName": "",
                    "prdoUploadTime": null,
                    "prdoUploadUserId": "",
                    "prdoUploadUserName": "",
                    "prdoVersion": "",
                    "updateBy": "",
                    "updateByName": null,
                    "updateTime": null
                }
            ]
            let s = ["notApproved", "waitForAcceptance", "start"]
            let str = JSON.stringify(projUpJson)
            console.log(str);
            // formData.append('projUpJson', JSON.stringify(projUpJson));
            // formData.append("projName", "xiangmu2");
            // let { data } = await this.$axios.post("/api/admin/project/add",record,{
            //     headers: {
            //         'Content-Type': 'application/x-www-form-urlencoded'
            //     }
            // })

        }
    },
    components: {
        formLine,
        elemTable,
        // selectEach
        SelectForm
    }

}
</script>

<style lang="scss" scoped>
.box {
    .dialogBox::v-deep {
        .el-dialog {
            width: 65%;
            // background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);


        }
    }
}
</style>

/*
{
    "children": [{
        "key": "username",
        "con": "=",
        "val": "张三",
        "linkChar": "and",
        "type": "normal"
    },
    {
        "children": [{
            "key": "age",
            "con": ">=",
            "val": "22",
            "linkChar": "or",
            "type": "normal"
        },
        {
            "key": "age",
            "con": "<=",
            "val": "18",
            "linkChar": "",
            "type": "normal"
        }],
        "linkChar": "and",
        "type": "brackets"
    },
    {
        "key": "sex",
        "con": "=",
        "val": "男",
        "linkChar": "",
        "type": "normal"
    }],
    "linkChar": "",
    "type": "brackets"
}
*/


